<template>
    <div>
        <el-card>
         
            <div>
                <el-form :model="myInfo" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-form-item label="镇名称" prop="name" style="width: 380px;">
                    <el-input type="text" v-model="myInfo.name" size="small" placeholder="请输入镇名称" />
                </el-form-item>
                <el-form-item label="年度" prop="annual" style="width: 380px;">
                    <el-date-picker
                        v-model="myInfo.annual"
                        type="year"
                        placeholder="选择年度">
                    </el-date-picker>
                </el-form-item>
                <div></div>
                 <el-form-item label="果园面积" prop="area" style="width: 380px;">
                    <el-input type="number" v-model="myInfo.area" size="small" placeholder="请输入果园面积">
                      <template slot="append">{{ myInfo.areaUnit }}</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="挂果面积" prop="areaFruiting" style="width: 380px;">
                    <el-input type="number" v-model="myInfo.areaFruiting" size="small" placeholder="请输入挂果面积">
                      <template slot="append">{{ myInfo.areaUnit }}</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="挂果率" prop="fruitingRatio" style="width: 380px;">
                    <el-input type="text" v-model="myInfo.fruitingRatio" size="small" placeholder="请输入挂果率(%)" />
                </el-form-item>
                <div></div>
                <el-form-item label="果园产量" prop="prodNum" style="width: 380px;">
                    <el-input type="number" v-model="myInfo.prodNum" size="small" placeholder="请输入果园产量">
                      <template slot="append">{{ myInfo.prodNumUnit }}</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="果园产值" prop="prodVal" style="width: 380px;">
                    <el-input type="number" v-model="myInfo.prodVal" size="small"  placeholder="请输入果园产值">
                     <template slot="append">{{ myInfo.prodValUnit }}</template>
                    </el-input>
                </el-form-item>
                <h3 style="margin: 30px 20px;">品种种植信息</h3>
                <div v-for="(domain, index) in myInfo.info" :key="domain.key">
                    <el-form-item
                    :label="'品种'+(index+1)+'名称'"
                    :prop="'info.' + index + '.plantName'"
                    :rules="{
                      required: true, message: '品种名称不能为空', trigger: 'blur'
                    }"
                    >
                    <el-input v-model="domain.plantName"></el-input>
                </el-form-item> 
                <el-form-item
                    :label="'品种'+(index+1)+'面积'"
                    :prop="'info.' + index + '.area'"
                    :rules="{
                      required: true, message: '品种面积不能为空', trigger: 'blur'
                    }"
                    >
                    <el-input v-model="domain.area">
                      <template slot="append">
                           万亩
                      </template>
                    </el-input>
                </el-form-item>
                <el-button @click.prevent="removeDomain(domain)" type="danger" v-if="index">删除</el-button>
                </div>
                <el-button style="margin:40px 90px;" @click="addDomain" type="info">新增品种</el-button>
                <div></div>
                <el-form-item>
                    <el-button @click="submitForm('ruleForm')" type="primary" size="small">保存</el-button>
                    <el-button @click="$router.go(-1)" size="small" plain>返回</el-button>
                </el-form-item>
            </el-form>
            </div>
        </el-card>
    </div>
</template>
<script>
import {addIdMessage,findFruitTownList} from "@/request/supervisionCenterApi.js"
 export default{
    data(){
        return{
            loading:false,
            myInfo: {
                prodNumUnit:'万吨',
                prodValUnit:"亿元",
                areaUnit:"万亩",
                name:"",
                annual:"",
                type:"镇",
                area:"",
                areaFruiting:"",
                fruitingRatio:"",
                prodNum:"",
                prodVal:"",
                info:[
                    {
                        plantName:"",
                        area:"",
                    },
                ]
            },
            varietyType:[],
            rules: {
                annual:[{ required: true, message: '请选择年度', trigger: 'change' },],
                name: [
                    { required: true, message: '请输入操作名称', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择村镇类别', trigger: 'change' },
                ],
                parentId: [
                    { required: true, message: '请选择所属上级', trigger: 'change' }
                ],
                area: [
                    { required: true, message: '请输入果园面积', trigger: 'blur' }
                ],
                areaFruiting: [
                   { required: true, message: '请输入挂果面积', trigger: 'blur' }
                ],
                fruitingRatio: [
                   { required: true, message: '请输入挂果率', trigger: 'blur' }
                ],
                prodNum: [
                   { required: true, message: '请输入果园产量', trigger: 'blur' }
                ],
                prodVal: [
                   { required: true, message: '请输入果园产值', trigger: 'blur' }
                ],
            }
        }
    },
    mounted(){
        if(this.$route.query.row){
            this.myInfo = this.$route.query.row
            if(this.myInfo.info!='null'){
                this.myInfo.info = JSON.parse(this.myInfo.info)
            }else{
                this.myInfo.info=[
                    {
                        plantName:"",
                        area:"",
                    },
                ]
            }
        }
    },
    methods:{
        async getTown(){
            this.loading=true
            let res = await findFruitTownList() 
            this.varietyType =[]
            console.log(res)
            if(res.code!=200)return
            res.data.forEach(v=>{
                if(v.type=='镇'){
                    let data = {
                        name:v.name,
                        id:v.id,
                    }
                    this.varietyType.push(data) 
                }      
            })
            this.loading=false
        },
        varietyChange(val){
                if(val)return this.getTown()
                this.loading=false
        },
        addDomain(){
            this.myInfo.info.push({
                        name:"",
                        area:"",
                    },);
        },
        removeDomain(item) {
            var index = this.myInfo.info.indexOf(item)
            if (index !== -1) {
            this.myInfo.info.splice(index, 1)
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) { 
                    let dataInfo = JSON.parse(JSON.stringify(this.myInfo))
                    dataInfo.info = JSON.stringify(dataInfo.info)
                    console.log(dataInfo)
                    let res = await addIdMessage(dataInfo)
                    console.log(res)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
 }
</script>
<style>
.demo-ruleForm {
      width: 100%;     
   }
   .el-form-item {
         display: inline-block;
         margin: 0 30px;
      }
</style>